<%inherit file="base.html"/>

<%def name="main_panel()">
<div id="nav-panel" class="fleft">
    <div class="block">
        <h3>${_("Navigation")}</h3>
        <a href="/repos/">${_("All Libraries")}</a>
    </div>
</div>

<div id="con-panel" class="fright">
    <div class="block">
        <h3>${_("Download Tasks")}</h3>
        <ul id="task-list"></ul>
    </div>
</div>

<textarea id="jtemplate" class="hide">
{#foreach $T.tasks as task}
<li class="task">
    {$T.task.repo_name}

    {#if $T.task.state == "init"}
    <span>${_("initializing...")}</span>

    {#elseif $T.task.state == "connect"}
    <br/>
    <span>${_("connecting server...")}</span>

    {#elseif $T.task.state == "index"}
    <div class="task-progress-bar" data="0"></div>
    <span>${_("indexing files...")}</span>

    {#elseif $T.task.state == "fetch"}
    <div class="task-progress-bar" data="{parseInt($T.task.tx_block_done * 100 / $T.task.tx_block_total)}"></div>
    ${_("Downloading...")}

        {#if $T.task.tx_block_total > 0 }
            {parseInt($T.task.tx_block_done * 100 / $T.task.tx_block_total)} %
        {#/if}

    {#elseif $T.task.state == "checkout"}
    <div class="task-progress-bar" data="{parseInt($T.task.checkout_finished_files * 100 / $T.task.checkout_total_files)}"></div>
    ${_("Creating Folder")} {$T.task.checkout_finished_files}/{$T.task.checkout_total_files}

    {#elseif $T.task.state == "merge"}
    <div class="task-progress-bar" data="0"></div>
    <span>${_("merging files changes...")}</span>

    {#elseif $T.task.state == "done"}
    <div class="task-progress-bar" data="100"></div>
    <span>${_("Done")}</span>
    <button data="/repo/?repo={$T.task.repo_id}" class="task-op-btn">${_("View Details")}</button>

    {#elseif $T.task.state == "canceling"}
    <span>${_("Canceling...")}</span>

    {#elseif $T.task.state == "canceled"}
    <span>${_("Canceled")}</span>

    {#elseif $T.task.state == "error"}
        {#if $T.task.error_str == "fetch"}
    <p class="error">{$T.task.tx_error_str}</p>
        {#elseif $T.task.error_str == "index"}
    <p class="error">${_("Failed to index local files.")}</p>
        {#elseif $T.task.error_str == "checkout"}
    <p class="error">${_("Failed to create local files.")}</p>
        {#elseif $T.task.error_str == "merge"}
    <p class="error">${_("Failed to merge local file changes.")}</p>
        {#elseif $T.task.error_str == "password"}
    <p class="error">${_("Incorrect password. Please download again.")}</p>
        {#elseif $T.task.error_str == "internal"}
    <p class="error">${_("Internal error.")}</p>
        {#/if}

    {#/if}


    {#if $T.task.state == "init" || $T.task.state == "connect" || $T.task.state == "fetch" || $T.task.state == "index"}
    <button data="/repos/download-tasks/?op=cancel&&repo_id={$T.task.repo_id}" class="task-op-btn">${_("Cancel")}</button>
    {#/if}

    <!-- {#if $T.task.error_str == "password"} -->
    <!-- <form action="/repo/download/" method="post"> -->
    <!--     <input id="repo_id" type="hidden" name="repo_id" value="{$T.task.repo_id}" /> -->
    <!--     <input id="relay_id" type="hidden" name="relay_id" value="{$T.task.relay_id}" /> -->
    <!--     <input id="repo_name" type="hidden" name="repo_name" value="{$T.task.repo_name}" /> -->
    <!--     <input id="encrypted" type="hidden" name="encrypted" value="1" /> -->
    <!--     <input id="worktree" type="hidden" name="worktree" value="{$T.task.worktree}" /> -->
    <!--     <p>${_("Please reenter the password:")}</p> -->
    <!--     <input id="password" type="password" name="password" value="" maxlength="64" /><br/> -->
    <!--     <input type="submit" value="${_("Submit")}" /> -->
    <!-- </form> -->
    <!-- {#/if} -->
</li>
{#/for}
</textarea>
</%def>

<%def name="js()">
<script type="text/javascript">
function taskRealTimeShow() {
    $.ajax({
        url: '/repos/clone-tasks/',
        dataType: 'json',
        cache: false,
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
            $('#task-list').setTemplateElement('jtemplate');
            $('#task-list').processTemplate(data);

            $('.task-op-btn').click(function() {
                location.href = $(this).attr('data');
            });

            $('.task-progress-bar').each(function() {
                $(this).progressbar({
                    value: Number($(this).attr('data'))
                });
            });

            var task = '';
            for (var i = 0, len = data.tasks.length; i < len; i++) {
                task = data.tasks[i];
                if (task.state != 'done' && task.state != 'canceled' && task.state != 'error') {
                    setTimeout(taskRealTimeShow, 1000);
                    break;
                }
            }
        }
    });
}
taskRealTimeShow();
</script>
</%def>
